<template>
   <div class="bottom">
    <p>总购买数量:{{totalNum}} </p>
    <p>
      <button class="pay">去结算</button>
      <button class="clear" @click="clearCart">清空购物车</button>
      <button class="clear_select" @click="delAllSelect">删除所有已选中</button>
      <button class="list">返回列表页</button>
    </p>
    <p>
      总价格 : ￥ <span>{{totalPrice}}</span>
    </p>
  </div>
</template>

<script>
//引入store
import { mapMutations,mapGetters } from 'vuex';

export default{
   name:"CartFooter",

   //方法-----mutations方法写这里----
   methods:{
    //通过mapMutations把store里mutations里的方法 放入该页面methods对象里
    ...mapMutations(["clearAll","clearSelect"]),

    //清空购物车-----不要直接操作props过来的数据，而是通知数据的源头store 要清空你的数据
    
    clearCart(){
      //点击后调用该函数，该函数在store里
      this.clearAll();
    },

    //删除所有已选中
    delAllSelect(){
      //点击后调用该函数，该函数在store里
      this.clearSelect();

    },
   },

   //计算属性---getters写这里---需要加工state数据的地方
   computed:{
    //通过mapGetters，把store里getters里的函数方法放入computed对象里，当前页面可以直接使用插值语法---使用它们的返回值（页面总数量，总价格）
    ...mapGetters(["totalNum","totalPrice"])
   }


   //计算属性
  //  computed:{
  //   //总数量----计算的都是选中的，要判断select为true
  //   totalNum(){
  //     //数组过滤，符合条件的item留下 select为true选中状态，形成新的数组。然后reduce进行叠加累计，初始值为0，item的buy_num相加赋值给prev，返回相加的和
  //     // return this.list.filter((item)=>item.select).reduce((prev,item)=>(prev+=item.buy_num),0)

  //   },

  //   //总价格----数组过滤filter，再进行reduce叠加累计得出数值，返回该数值
  //   // totalPrice(){
  //   //   return this.list.filter((item)=>item.select).reduce((prev,item)=>(prev+=item.buy_num*item.price),0)
  //   // },

  //  },

};

</script>

<style>
.bottom {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: pink;
 
}
.bottom > p {
  font-size: 20px;
}

.bottom > p > button {
  font-size: 20px;
  padding: 3px 10px;
  cursor: pointer;
  color: #fff;
}

.bottom > p > button.pay {
  background-color: green;
}

.bottom > p > button.clear {
  background-color: red;
}

.bottom > p > button.clear_select {
  background-color: orange;
}

.bottom > p > button.list {
  background-color: skyblue;
}

.bottom > p > span {
  color: red;
}
</style>
